<template>
	<view class="partner">
		<!-- 顶部 -->
		<view class="top" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/rebate/bgm-partner-top.png') + ')' }">
			<view class="top-inner">
				<view class="summary">
					<view class="summary-title">我的合伙人权益</view>
					<!-- <view class="summary-value">{{partner_info.total_num}}</view> -->
					<view class="summary-value">津贴份额 {{partner_info.proportion}}</view>
				</view>
				<!-- <view class="link">
					<view class="link-text" @click="linkTo('/plugpages/rebate/partner-list')">详情</view>
					<view class="link-arrow" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/rebate/arrow-white.png') + ')' }"></view>
				</view> -->
			</view>
			<!-- 统计概览 -->
			<view class="summ">
				<view class="summ-item" v-for="(item,index) in summaryFields">
					<view class="summ-value">{{partner_info[item.index]}}</view>
					<view class="summ-title">{{item.title}}</view>
				</view>
			</view>
			<!-- 转换入口 -->
			<view class="withdraw">
				<view class="withdraw-amount" @click="$util.redirectTo('/plugpages/rebate/bill?role=partner')">可转换津贴<view class="withdraw-amount-value">{{partner_info.account}}</view></view>
				<view class="withdraw-button" @click="$util.redirectTo('/plugpages/rebate/withdraw_apply?role=partner')">去转换</view>
			</view>
		</view>
		<view class="content">
			<!-- 概览 -->
			<view class="box stats stats-total">
				<view class="stats-item">
					<view class="stats-value">{{periodStats.platform_real_goods_money}}</view>
					<view class="stats-title">平台累计营业额</view>
				</view>
				<view class="stats-item">
					<view class="stats-value">{{periodStats.platform_order_num}}</view>
					<view class="stats-title">平台累计订单量</view>
				</view>
			</view>
			<!-- 营业额列表 -->
			<view class="filter-data">
				<view class="period-head">
					<view class="filter" @click="openMonthPicker">
						<view class="filter-value">{{filterValue.year.name}}{{filterValue.month.name}}</view>
						<view class="filter-icon"></view>
					</view>
					<view class="period-title">月营业额(元) {{periodStats.total_real_goods_money}}</view>
				</view>
				<view class="agent-list" v-for="(item,index) in order_data" :key="index">
					<view class="agent-item">
						<view class="agent-head">
							<view class="agent-time">{{item.order_days}}</view>
							<!-- <view class="agent-link" @click="$util.redirectTo('/plugpages/rebate/order?role=partner&date='+item.order_days)">查看详情<view class="agent-link-arrow"></view></view> -->
						</view>
						<view class="agent-fields">
							<view class="agent-fields-column">
								<view class="agent-field">营业额 ¥{{item.real_goods_money}}</view>
								<view class="agent-field">预计津贴 {{item.total_commission}}</view>
								<view class="agent-field">退款金额 ¥{{item.refund_money}}</view>
							</view>
							<view class="agent-fields-column">
								<view class="agent-field">订单量 {{item.order_num}}</view>
								<view class="agent-field">已分津贴 {{item.settlement_commission}}</view>
							</view>
						</view>
					</view>
				</view>
				<ns-empty v-if="order_data.length == 0" text="暂无数据" :fixed="!1" :isIndex="!1"></ns-empty>
			</view>
		</view>
		<diy-month-picker ref="monthPicker" @onConfirm="confirmMonth"></diy-month-picker>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyMonthPicker from '../components/diy-month-picker/diy-month-picker.vue';
	export default {
		components: {
			diyMonthPicker
		},
		data() {
			return {
				date: '',
				filterValue: {
					year: {},
					month: {}
				},
				summaryFields: [{
					title: '累计津贴',
					index: 'total_commission'
				}, {
					title: '转换中津贴',
					index: 'account_withdraw_apply'
				}, {
					title: '已转换津贴',
					index: 'account_withdraw'
				}],
				periodStats: {},
				partner_info: {},
				order_data: []
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '合伙人中心'
			})
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token');
				this.getPartnerHead();
				this.getPartnerOrder();
			} else {
				setTimeout(() => {
					this.$refs.login.open('/plugpages/rebate/partner');
				});
			}
		},
		methods: {
			getPartnerHead() {
				this.$api.sendRequest({
					url: '/partner/api/partner/getPartnerHead',
					data: {},
					success: res => {
						if (res.code >= 0) {
							this.partner_info = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/member/index/index',{},'tabbar');
							}, 1500);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getPartnerOrder() {
				this.$api.sendRequest({
					url: '/partner/api/partner/getPartnerOrder',
					data: {date:this.date},
					success: res => {
						if (res.code >= 0) {
							this.periodStats = res.data.total;
							this.order_data = res.data.day;
						}
					}
				});
			},
			openMonthPicker() {
				this.$refs.monthPicker.show();
			},
			confirmMonth(data) {
				this.filterValue = {
					year: data[0],
					month: data[1]
				}
				this.date =  data[0]['value'] + '-' + data[1]['value'];
				this.order_data = [];
				this.getPartnerOrder();
			},
			linkTo(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onLoad() {
			let today = new Date();
			let month = today.getMonth() + 1;
			let year = today.getFullYear();
			let monthname = month;
			if (month < 10) {
				monthname = `0${month}`
			}
			this.filterValue = {
				year: {
					name: `${year}年`,
					value: year
				},
				month: {
					value: month,
					name: `${monthname}月`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../public/css/style.scss';

	.partner {}

	.top {
		position: relative;
		width: 750rpx;
		height: 513rpx;
		padding: 48rpx 48rpx;
		background: linear-gradient(134deg, #FF5A58 0%, #FF4544 100%);
		@include bgm('bgm-partner-top.png');

		.top-inner {
			@include flex(space-between, center);
		}

		.summary {
			.summary-title {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.75);
				line-height: 33rpx;
			}

			.summary-value {
				margin: 8rpx 0;
				font-size: 56rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 68rpx;
			}
		}

		.link {
			@include flex(center, center);

			.link-text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			.link-arrow {
				@include bgm('arrow-white.png');
				width: 32rpx;
				height: 32rpx;
			}
		}


		.summ {
			margin-top: 32rpx;
			padding-top: 32rpx;

			border-top: 1px solid rgba(255, 255, 255, 0.75);
			@include flex(space-between, center);

			.summ-item {
				.summ-title,.summ-value {
					text-align: center;
				}
				.summ-value {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 45rpx;
				}

				.summ-title {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.75);
					line-height: 34rpx;
				}
			}
		}
		
		.withdraw {
			@include withdraw-box;
		}
		
	}

	.content {
		padding: 0 30rpx;
	}

	.box {
		margin-top: 24rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.stats {
		@include flex(space-between, center);
		height: 158rpx;

		.stats-item {
			padding: 0 24rpx;

			.stats-value {
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #303133;
				line-height: 45rpx;
			}

			.stats-title {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #909399;
				line-height: 34rpx;
			}
		}

		&.stats-total {

			.stats-item {
				width: 50%;
			}
		}
	}

	.turnover {
		.turnover-head {
			padding: 42rpx 30rpx;
			@include flex(space-between, center);
		}

		.turnover-stats {
			@include flex(flex-start, center);
			font-size: 24rpx;
			color: #303133;
			line-height: 33rpx;

			.turnover-stats-value {
				color: #FF4544;
			}
		}

		.table {

			.th,
			.td {
				margin-right: 10rpx;
				text-align: center;

				&:first-child {
					width: 90rpx;
				}

				&:nth-child(2) {
					width: 220rpx;
				}

				&:nth-child(3) {
					width: 160rpx;
				}

				&:last-child {
					width: 160rpx;
					margin-right: 0;
				}
			}

			.t-head,
			.tr {
				padding: 24rpx 0;
				@include flex(center, center);
			}

			.t-head {
				padding-left: 16rpx;
				padding-right: 16rpx;
				border: 1rpx solid #EBEBEB;
				border-left: none;
				border-right: none;

				.th {
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;
				}
			}

			.t-body {
				padding: 0 16rpx;

				.tr {
					border-bottom: 1rpx solid #EBEBEB;

					&:last-child {
						border-bottom: none;
					}

					.td {
						font-size: 26rpx;
						color: #303133;
						line-height: 37rpx;
					}
				}
			}
		}

	}
</style>
